<template>
  <el-drawer
    direction="rtl"
    v-model="visible"
    :before-close="handleClose"
  >
    <template #header>
      <span class="flow-ant-drawer-title">
      <el-icon class="anticon"><EditPen /></el-icon>
        <EditName v-model:value="node.name"/>
      </span>
    </template>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <div v-if="node.props.showPriorityLevel" class="flow-setting-item">
          <p class="flow-setting-item-title">分支等级</p>
          <el-select v-model="node.props.priorityLevel" :size="size" placeholder="请选择等级"
                     :options="levelOptions" class="w-fill"></el-select>
        </div>
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">分支类型</p>
          <el-radio-group v-model="node.props.branchType">
            <el-radio :value="branchType.value" v-for="(branchType, i) in branchTypes" :key="i"
                      :label="branchType.value">
              {{ branchType.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <div v-if="node.props.branchType == 1" class="flow-setting-item">
          <p class="flow-setting-item-title">条件规则</p>
          <div class="flow-setting-condition-box">
            <div v-for="(group, i) in node.props.conditionGroup" :key="i">
              <div class="flow-setting-condition-group">
                <div class="flow-setting-condition-item" v-for="(condition, k) in group.conditions" :key="k">
                  <el-select v-model="condition.columnValue" :size="size" style="width: 40%" placeholder="字段"
                             @change="handleChange">

                   <el-option-group label="基础字段">
                     <el-option :value="column.value" v-for="(column, i) in columns" :key="i" :label="column.label">
                       {{ column.label }}
                     </el-option>
                   </el-option-group>
                    <el-option-group label="表单字段">
                      <el-option :value="column.value" v-for="(column, i) in formColumns" :key="i"
                                 :label="column.label">{{ column.label }}
                      </el-option>
                    </el-option-group>
                  </el-select>
                  <div class="flow-setting-condition-option">
                    <!-- 判断(操作)符 -->
                    <FlowSimpleSelect v-model="condition.optType" :name="condition.optTypeName" 
                    @update:name="condition.optTypeName = $event" :datas="optTypes"
                                      labelName="label" style="width: 26%"/>
                    <!-- 值类型 -->
                    <FlowSimpleSelect v-model="condition.valueType" :datas="valueTypes" labelName="label"
                                      style="width: 26%" @change="condition.conditionValue = []"/>
                    <!-- 值 -->
                    <div class="flow-setting-condition-value">
                      <!-- 动态值 -->
                      <FlowSelect
                        v-if="condition.valueType == 2"
                        v-model="condition.conditionValue"
                        :name="condition.conditionValueName"
                        :datas="dynamicValueTypes"
                        labelName="label"
                      />
                      <!-- 流程值 -->
                      <FlowSelect
                        v-else-if="condition.valueType == 3"
                        v-model="condition.conditionValue"
                        :name="condition.conditionValueName"
                        :datas="flowValueTypes"
                        labelName="label"
                      />
                      <!-- 数据源 -->
                      <FlowSelect
                        v-else-if="condition.valueType == 4"
                        v-model="condition.conditionValue"
                        :name="condition.conditionValueName"
                        :datas="columns"
                        labelName="label"
                      />
                      <!-- 固定 -->
                      <FlowInput v-else v-model="condition.conditionValue" 
                      :name="condition.conditionValueName"
                      @update:name="condition.conditionValueName = $event"
                                 :size="size"/>
                    </div>
                  </div>
                  <div class="flow-setting-condition-del" @click="delCondition(1, group, condition)">
                    <!--                    <a-icon type="delete" theme="filled" />-->
                    <!-- <i class="el-icon-delete" theme="filled"></i> -->
                    <el-icon><Delete /></el-icon>
                  </div>
                </div>
                <div class="flow-setting-condition-add" @click="addCondition(1, group)">
                  <!--                  <a-icon type="plus-circle" theme="filled" />-->
                  <!-- <i class="el-icon-circle-plus-outline" theme="filled"></i> -->
                  <el-icon><CirclePlus /></el-icon>
                  <span style="margin-left: 5px">且条件</span>
                </div>
              </div>
              <div v-if="node.props.conditionGroup.length > 1 && i != node.props.conditionGroup.length - 1"
                   class="flow-setting-condition-group-connector">或
              </div>
            </div>
            <div class="flow-setting-condition-add" @click="addGroup(1)">
              <!--              <a-icon type="plus-circle" theme="filled" />-->
              <!-- <i class="el-icon-circle-plus-outline" theme="filled"></i> -->
              <el-icon><CirclePlus /></el-icon>
              <span style="margin-left: 5px">或条件</span>
            </div>
          </div>
        </div>
        <div v-if="node.props.branchType == 2" class="flow-setting-item">
          <p class="flow-setting-item-title">公式规则</p>
          <div class="flow-setting-condition-box">
            <el-input v-model="node.props.expression"></el-input>
          </div>
        </div>
      </div>
    </div>
    {{ node }}
    <!-- <FlowDrawerFooter @close="onClose" @save="onSave"/> -->
  </el-drawer>
</template>
<script setup name="FlowConditionDrawer">
import {flowMixin} from '../../../mixins/flowMixin';
import EditName from '../../../common/EditName.vue';
import FlowSelect from '../../../Component/FlowSelect.vue';
import FlowSimpleSelect from '../../../Component/FlowSimpleSelect.vue';
import FlowInput from '../../../Component/FlowInput.vue';
import flowhook from '../../../mixins/flowhook';

// import FlowDrawerFooter from '../../common/DrawerFooter.vue';

import { reactive, ref, createApp,defineEmits,defineProps,computed,onMounted,toRefs,defineExpose } from "vue";
import { useStore } from 'vuex';
/* 组件局部注册 */
const store = useStore();
const {uuid,nameClass,delNode,drawerWidth,ccIcon} = flowhook();

const emit = defineEmits(['close'])


const node = ref({});
const visible = ref(false);
const size = ref('default');

const levelOptions = ref([]);
const branchTypes = reactive([
        {label: '规则', value: 1},
        {label: '公式', value: 2},
        {label: '其他', value: 3},
      ]);

const columns = reactive([
        {label: '姓名', value: '姓名'},
        {label: '工号', value: '工号'},
        {label: '部门', value: '部门'},
        {label: 'Base地', value: 'Base地'},
        {label: '所属体系', value: '所属体系'},
        {label: '归属地', value: '归属地'},
      ]);


const formColumns = reactive([{label: '加班类型', value: '加班类型'}]);

const optTypes = reactive([
        {label: '等于', value: 'eq'},
        {label: '不等于', value: 'ne'},
        {label: '大于', value: 'gt'},
        {label: '大于等于', value: 'ge'},
        {label: '小于', value: 'lt'},
        {label: '小于等于', value: 'le'},
        /*  { label: '为空', value: '7' },
        { label: '不为空', value: '8' }, */
      ])

const valueTypes = reactive([
        {label: '固定', value: '1'},
        {label: '动态值', value: '2'},
        {label: '流程值', value: '3'},
        /* { label: '数据源', value: '4' }, */
      ]);
      
const dynamicValueTypes = reactive([
        {label: '当前员工', value: '1'},
        {label: '当前员工工号', value: '2'},
        {label: '当前部门', value: '3'},
        {label: '当前组织', value: '4'},
        {label: '下级部门', value: '5'},
        {label: '上级部门', value: '6'},
        {label: '当前日期', value: '7'},
        {label: '当前时间', value: '8'},
      ]);

const flowValueTypes = reactive([
        {label: '流程状态', value: '1'},
        {label: '流程创建人', value: '2'},
      ]);


const dataSourceOptions = reactive([
        {
          value: '1',
          label: '本表单',
          children: [
            {label: '姓名', value: '姓名'},
            {label: '工号', value: '工号'},
            {label: '部门', value: '部门'},
            {label: 'Base地', value: 'Base地'},
            {label: '所属体系', value: '所属体系'},
            {label: '归属地', value: '归属地'},
          ],
        },
      ])


const afterVisibleChange = (val) => {
      console.log('visible', val);
}


const showDrawer = (data, routeNode) => {
      visible.value = true;
      node.value = data;
      console.log("分支条件-------->",JSON.stringify(routeNode))
      // 等级
      if (node.value.props.showPriorityLevel) {
        var levelOptions = [];
        routeNode.branchs.forEach((item, index) => {
          let priorityLevel = index + 1;
          levelOptions.push({label: '优先' + priorityLevel, value: priorityLevel});
        });
      }
    }

const  handleChange = () => {
}


const addGroup = (type) => {
      if (type == 1) {
        node.value.props.conditionGroup.push({
          id: uuid,
          condition: 'OR',
          conditions: [
            {
              id: uuid,
              columnId: '姓名',
              columnName: '姓名',
              columnValue: '姓名',
              columnType: undefined,
              optType: 'eq',
              optTypeName: '等于',
              valueType: '1',
              conditionValue: [],
              conditionValueName: [],
            },
          ],
        });
      }
    }
const  addCondition = (type, currGroup) => {
      if (type == 1) {
        node.value.props.conditionGroup.forEach((group) => {
          if (currGroup.id == group.id) {
            group.conditions.push({
              id: uuid,
              columnId: undefined,
              columnName: undefined,
              columnValue: undefined,
              columnType: undefined,
              optType: undefined,
              optTypeName: undefined,
              valueType: undefined,
              conditionValue: [],
              conditionValueName: [],
            });
          }
        });
      }
    }
const  delCondition = (type, currGroup, CurrCondition) => {
      if (type == 1) {
        node.value.props.conditionGroup.forEach((group, k) => {
          if (currGroup.id == group.id) {
            group.conditions.forEach((condition, index) => {
              if (CurrCondition.id == condition.id) {
                group.conditions.splice(index, 1);
                // 当前组没有条件了，当前组也需要删除
                if (group.conditions.length == 0) {
                  node.value.props.conditionGroup.splice(k, 1);
                }
              }
            });
          }
        });
      }
    }
const  onClose = () => {
      visible.value = false;
      emit('close');
}

const handleClose = () => {
      // 更新节点显示信息
      let content = '';
      console.log("this.node.props.branchType类型为:"+node.value.props.branchType)
      if (node.value.props.branchType == 1) {
        node.value.props.conditionGroup.forEach((group, j) => {
          if (j != 0) {
            content += ' 或 ';
          }
          if (group.conditions.length > 0) {
            group.conditions.forEach((condition, i) => {
              console.log("---------------------condition",JSON.stringify(condition))
              //const conditionValueName = condition.conditionValueName[0];
              const conditionValueName = condition.conditionValue;
              console.log("---------------------conditionValueName",conditionValueName)

              if (conditionValueName) {
                if (i != 0) {
                  content += ' 且 ';
                }
                content += '[' + condition.columnValue + ' ' + condition.optTypeName + ' ' + conditionValueName + ']';
              }
            });
          }
        });
      } else if( node.value.props.branchType == 2) {
        content += '公式:['+node.value.props.expression+']';
      } else {
        content += '任意(其他)';
      }
      store.dispatch('process/updateNode', {currNode: node.value, field: 'content', value: null});
      store.dispatch('process/updateNode', {currNode: node.value, field: 'error', value: true});
      if (content) {
        console.info('content', content);
        store.dispatch('process/updateNode', {currNode: node.value, field: 'error', value: false});
        store.dispatch('process/updateNode', {currNode: node.value, field: 'content', value: content});
        onClose();
      }
}

defineExpose({
  showDrawer
});
</script>
